<template>
  <div id="app">
    <el-watermark id="watermark" :font="font" :content="watermark ? ['Teewom', 'Happy Working'] : ''">
      <component :is="LayoutComponents[layout]" />
      <ThemeDrawer />
    </el-watermark>
  </div>
</template>
<script setup lang="ts" name="App">
import { computed, reactive, watch, type Component } from "vue";
import { type LayoutType } from "@/management/store/layouts/interface";
// import { useGlobalStore } from "@/stores/modules/global";
import ThemeDrawer from "@/layouts/components/ThemeDrawer/index.vue";
import LayoutVertical from "@/layouts/LayoutVertical/index.vue";
import LayoutClassic from "@/layouts/LayoutClassic/index.vue";
import LayoutTransverse from "@/layouts/LayoutTransverse/index.vue";
import LayoutColumns from "@/layouts/LayoutColumns/index.vue";
import { useStore } from 'vuex'
const store = useStore()

const LayoutComponents: Record<LayoutType, Component> = {
  vertical: LayoutVertical,
  classic: LayoutClassic,
  transverse: LayoutTransverse,
  columns: LayoutColumns
};

// const globalStore = useGlobalStore();

const isDark = computed(() => store.state.layouts.globalState.isDark);
const layout = computed(() => store.state.layouts.globalState.layout);
const watermark = computed(() => store.state.layouts.globalState.watermark);

const font = reactive({ color: "rgba(0, 0, 0, .15)" });
watch(isDark, () => (font.color = isDark.value ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"), {
  immediate: true
});
</script>

<style lang="scss">
@import url('./styles/icon.scss');
@import url('../materials/questions/common/css/icon.scss');
@import url('./styles/reset.scss');
@import url('./styles/app.scss');

html {
  font-size: 50px;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  // font-size: 14px;
}

*,
a:hover * {
  text-decoration: none;
}

.layout {
  min-width: 600px;
}
</style>
